<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>礼品管理</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/formSelects/formSelects-v4.css"/>
</head>
<style>
    .modelBeforeApplyUserForm label {
        width: 100px;
    }

    .layui-table-cell {
        height: auto;
        /*line-height: 28px;*/
    }
</style>
<body>
<% include("../layout/loading.html"){} %>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">

                <div class="layui-inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label w-auto">礼品名称:</label>
                        <div class="layui-input-inline mr0">
                            <input id="productName" class="layui-input" type="text" placeholder="请输入"/>
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>查询</button>
                    <button id="btnReset" class="layui-btn icon-btn"><i class="layui-icon">&#xe669;</i>重置</button>
                </div>

                <div class="layui-form-item audit" style="margin-top: 20px">
                    <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>新增</button>
                </div>

                <div class="layui-form-item" style="margin-top: 20px">
                    <table class="layui-table" id="productTable" lay-filter="productTable"
                           style="margin-top: 30px"></table>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a> 
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del3">删除</a>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="productVo">
    <form id="productVoForm" lay-filter="productVoForm" class="layui-form model-form productVoForm"
          style="margin-left: 70px;height: 500px">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>礼品名称:</label>
            <input name="productName" placeholder="请输入" type="text" class="layui-input" lay-verType="tips"
                   autocomplete="off" lay-verify="required" style="width: 300px"/>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>礼品封面:</label>
            <button type="button" class="layui-btn layui-icon layui-icon-upload" id="productImg">上传图片</button>
        </div>
        <div>
            <label class="layui-form-label"></label>
            <font color="red">推荐尺寸：310*205px</font>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <img class="layui-upload-img" id="productPicUrl" width="100px">
            <input id="picUrl" name="picUrl" lay-verify="required" hidden/>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>所需豆藤:</label>
            <input name="price" placeholder="请输入" type="text" class="layui-input" lay-verType="tips"
                   autocomplete="off" lay-verify="required|number|Ndouble" style="width: 300px"/>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>礼品介绍:</label>
<!--            <input name="productDesc" placeholder="请输入" type="text" class="layui-input" lay-verType="tips"-->
<!--                   autocomplete="off" lay-verify="required" style="width: 300px"/>-->
            <textarea placeholder="请输入" class="layui-textarea" name="productDesc" style="width: 300px;height: 150px"></textarea>
        </div>

        <div class="layui-upload">
            <label class="layui-form-label"><span style="color: red">*</span>礼品图集:</label>
            <button type="button" class="layui-btn" id="manyImages"  >图集上传</button>
                <div class="layui-upload-list" id="imageses"></div>
            <input id="images" name="images" lay-verify="required" hidden/>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="productVoSubmit" lay-submit>保存</button>
        </div>

    </form>
    <style>
        .js-img{width:100px;height:100px;position:relative;float:left;padding: 0 5px 5px 0}
        .js-img>img{width:100px;height:100px;}
        .js-img>span{cursor:pointer;font-weight:666;position:absolute;top:0;right:0;display:inline-block;text-align:center;width:24px;height:24px;line-height:24px;}
    </style>
</script>


<!-- js部分 -->
<script type="text/javascript" src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/js/common.js"></script>

<script>
    layui.use(['layer', 'form', 'table', 'admin', 'laydate', 'upload', 'jquery', 'formSelects', 'excel'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var formSelects = layui.formSelects;


        var insTb = table.render({
            elem: '#productTable',
            url: '/admin/product/list',
            page: true,
            cellMinWidth: 100,
            text: {none: '暂无数据'},
            cols: [[
                {field: 'id', title: '编号', hide: true},
                {type: 'numbers'},
                {field: 'productName', title: '礼品名称'},
                {
                    title: '礼品封面', align: "center", width: 150, templet: function (d) {
                        if (d.picUrl != null && d.picUrl != '') {
                            return '<div ><img src="' + d.picUrl + '" alt="" width="100px" lay-event="showBigImage1" /></div>';
                        } else {
                            return '   --    ';
                        }
                    }
                },
                {field: 'picNum', title: '礼品图集'},
                {field: 'price', title: '所需豆藤'},
                {
                    field: 'createdDate', title: '创建时间', templet: function (d) {
                        return d.createdDate;
                    }
                },
                {
                    field: 'updatedDate', title: '修改时间', templet: function (d) {
                        return d.updatedDate
                    }
                },
                {align: 'center', toolbar: '#tableBar', title: '操作', minWidth: 200}
            ]]
        });

        //搜索
        $('#btnSearch').click(function () {
            var productName = $('#productName').val();
            var storeId = $('#storeId').val();
            insTb.reload({
                where: {
                    storeId: storeId,
                    productName: productName
                }
            });
        });

        // 重置
        $('#btnReset').click(function () {
            $("#productName").val("");
            $("#storeId").val("");
            window.location.reload();
        });
        // 添加
        //
        $('#btnAdd').click(function () {
            showEditModel();
        });

        // 工具条点击事件
        table.on('tool(productTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            switch (obj.event) {
                // 修改
                case 'edit':
                    showEditModel(data);
                    break;
                // 删除
                case 'del3':
                    doDel3(data.id);
                    break;
                case 'showBigImage1':
                    showBigImage(data.picUrl);
                    break;
            }
        });
      //自定义表单验证
        form.verify({
            Ndouble:[
                /^[1-9]\d*$/
                ,'只能输入正整数哦'
            ]
        });
        function showBigImage(e) {
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true, //点击阴影关闭
                area: ['500px', 'auto'], //宽高
                content: '<div ><img src="' + e + '" alt="" width="500px" ></a></div>'
            });
        }
        // $('#imageses').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" height="100px" width="100px">')

        var previewImg = x => ["<div class='js-img'><img src='",x,"' class='layui-upload-img'/><span>X</span></div>"].join("");
        // 显示表单弹窗
        function showEditModel(productVo) {
            // console.log(productVo);
            admin.open({
                type: 1,
                title: (productVo ? '编辑' : '新增') + '礼品',
                area: '650px',
                content: $('#productVo').html(),
                success: function (layero, dIndex) {
                    var count = 1;
                    // 回显数据
                    if (productVo) {
                        $('#productPicUrl').attr('src', productVo.picUrl);//进行图片回显
                        form.val('productVoForm', productVo);
                    }
                    form.render();

                    //上传图片
                    upload.render({
                        elem: '#productImg',
                        url: '/upload/uploadFile',
                        choose: function (obj) {
                            //预读本地文件示例
                            obj.preview(function (index, imgFile, result) {
                                $('#productPicUrl').attr('src', result);
                            });
                        },
                        done: function (res) {
                            if (res.msg == null) {
                                return layer.msg('上传失败', {icon: 2});
                            }
                            $('#picUrl').val(res.msg);
                        }
                    });
                    if(productVo&&productVo.images)$('#imageses').html(productVo.images.split(",").map(i=>previewImg(i)).join(""));

                    // $('#imageses').append(previewImg(res.msg));
                    form.on('submit(productVoSubmit)', function (data) {
                        // console.log(data);
                        var imgs = [];
                        $("#imageses img").each((k,v)=>imgs.push(v.src));
                        data.field.images = imgs.join();

                        if (productVo) {
                            ajaxCommon('/admin/product/updateProduct', data.field);
                            layer.close(dIndex);
                        } else {
                            ajaxCommon('/admin/product/addProduct', data.field);
                            layer.close(dIndex);
                        }
                        insTb.reload();
                        return false;
                    });
                    $("body").on("click",".js-img>span",function(e){
                        $(this).closest(".js-img").remove();
                    });

                    //json的length
                    function getJsonLength(jsonData){
                        var jsonLength = 0;
                        for(var item in jsonData){
                            jsonLength++;
                        }
                        return jsonLength;
                    }

                    var images = "";
                    //多图片上传
                    upload.render({
                        elem: '#manyImages' //绑定点击按钮
                        ,url: '/upload/uploadFile' //上传接口
                        ,multiple: true  //确认上传多张图片
                        ,number: 6 //最大上传图片数量
                        ,before: function(obj){
                            //预读本地文件示例，不支持ie8
                            // obj.preview(function(index, file, result){

                                // $('#imageses').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" height="100px" width="100px">')
                            // });
                        }
                        ,after: x=> console.log(x)
                        ,done: function(res){
                            // if(parseInt(vm.imgList.length) < 9){
                            //     vm.imgList.push(res.object[0]);   //少于9张图片，将上传图片加入数组
                            // }


                            //上传完毕
                            if($('#imageses>*').length>5) {
                                layer.msg("图片不允许超过6张！");
                            }else {
                                if(res.code==200&&res.msg)$('#imageses').append(previewImg(res.msg));
                                if (images == "") {
                                    images = res.msg;
                                } else {

                                    // images = images + "," + res.msg;
                                    //
                                };
                                // console.log(images);
                                $('#images').val(images);
                            }
                        }
                    });
                }
            });
        }

        function doDel3(id) {
            top.layer.confirm('确定要删除吗?', {icon: 7}, function (i) {
                top.layer.close(i);
                ajaxCommon('/admin/product/delProduct', {id: id});
                insTb.reload();
            });
        }
    })
</script>

</body>
</html>
